<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>d3测试</title>
		<script src="https://d3js.org/d3.v5.js"></script>
		<style type="text/css">
			.update {fill: red;}
			.enter {fill: green;}
			.exit {fill: black;}
			text {font: 700 36px 'Helvetica Neue', Helvetica}
		</style>
	</head>
	<body>
		<svg width=1000 height=384></svg>
	</body>
	<script type="text/javascript">
		var alphabet = "abcdefghijklmnopqrstuvwxyz".split("");
		
		var svg = d3.select("svg"),
		    width = +svg.attr("width"), // 表达式 A=+B 会进行 B转化为数字 赋值给A
		    height = +svg.attr("height"),
		    g = svg.append("g").attr("transform", "translate(32," + (height / 2) + ")");
		
		function update(data) {
			console.log('入参数据：', data);
			
		  var t = d3.transition().duration(750);
		
		  // JOIN new data with old elements.
		  var text = g.selectAll("text")
		    .data(data, function(d) { return d; });
		
		  // EXIT old elements not present in new data.
		  text.exit()
		      .attr("class", "exit")
		    .transition(t)
		      .attr("y", 60)
		      .style("fill-opacity", 1e-6)
		      .remove();
		
		  // UPDATE old elements present in new data.
		  text.attr("class", "update")
		      .attr("y", 0)
		      .style("fill-opacity", 1)
		    .transition(t)
		      .attr("x", function(d, i) {console.log('update data ', d, i); return i * 30; });
		
		  // ENTER new elements present in new data.
		  text.enter().append("text")
		      .attr("class", "enter")
		      .attr("dy", ".35em")
		      .attr("y", -60)
		      .attr("x", function(d, i) { console.log('enter data ', d, i); return i * 30; })
		      .style("fill-opacity", 1e-6)
		      .text(function(d) { return d; })
		    .transition(t)
		      .attr("y", 0)
		      .style("fill-opacity", 1);
		}
		
		// The initial display.
		update(alphabet);
		
		d3.interval(function () {
			update(d3.shuffle(alphabet).slice(0, Math.floor(Math.random() * 26)).sort());
		}, 1500)
	</script>
</html>
